<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BOM对象及其操作</title>
</head>
<body>
<button id="btn01" disabled onclick="alert('我又能被点击了')">确定</button>
<span id="span01">3</span>秒
</body>
<script>
    /*
        BOM 就是指 Bowser Object Model 浏览器对象模型，
        就是将浏览器看作是一个对象模型，通过该操作该对象模型能够
        操作浏览器的行为，浏览器的对象可以统一使用 window 表示

        即我们可以通过操作window对象能够获取及操作浏览器的所有行为，
        包括但不限于操作控制台console，浏览器历史记录 history，
        浏览器的导航栏 location 等内容；
        通常window对象在使用是可以省略，如下
        window.console.log() 可以简化为 console.log()

        window对象下常用的方法，如下：
            window.alert(message): 在页面中开启一个弹窗，只有消息通知
            confirm(message): 对话框，能够可选择是否执行某一个操作
            setTimeout(callbackFN,time): 设置延时任务，能够在你设定的时间点执行你设置的
            业务逻辑操作，时间单位为毫秒
            setInterval(callbackFN,time): 设置定时任务，能够在你设置的时间间隔中，
            每隔一个时间间隔执行一次你指定的业务逻辑操作，时间单位为毫秒；如果你没有手动清除
            定时任务，那么该定时任务会一直执行；每一个setInterval()方法在定义时都会返回一个
            interval值，该值可以看作是该定时任务的id，后续可以根据该id删除定时任务
            clearInterval(interval): 根据你传入的定时任务interval值，清除该定时任务
    */
    /*  alert("你好")
      confirm("是否删除数据？")*/
    // 3秒后修改页面的背景颜色
    // setTimeout()函数的第一个参数中需要传入一个方法；
    // 该方法可以通过箭头函数（java中的lambda表达式）的方式时间
    setTimeout(() => {
        // 获取随机数
        let number = Math.random();
        let str = number.toString(16);
        // 截取小数部分的前6位就可以用来当作颜色的配比
        // 将该颜色设置到body的背景颜色中
        document.querySelector('body')
            .style.backgroundColor = '#' + str.substring(2, 8);
    }, 3000);

    // 3秒后按钮能够正常点击
    setTimeout(() => {
        let btn = document.querySelector("#btn01");
        btn.disabled = false;
    }, 3000)

    // 设置一个定时任务，每秒修改页面中的读秒标签内容
    let span01 = document.querySelector("#span01");
    let interval = setInterval(a, 1000);

    function a() {
        // 获取span中的秒数，然后将其解析为int
        let seconds = Number.parseInt(span01.innerText);
        if (seconds > 0) {
            span01.innerText = --seconds;
        } else {
            clearInterval(interval)
        }
    }
</script>
</html>